<template>
	<div class="role-switcher">
		<!-- 当前用户信息显示 -->
		<div class="current-user" @click="showSwitcher = !showSwitcher">
			<i class="el-icon-user"></i>
			<span class="username">{{ currentUser.username }}</span>
			<span class="role-name">{{ currentUser.roleName }}</span>
			<i class="el-icon-arrow-down" :class="{rotate: showSwitcher}"></i>
		</div>
		
		<!-- 角色切换下拉菜单 -->
		<div class="switcher-dropdown" v-show="showSwitcher">
			<div class="dropdown-header">
				<span>切换角色</span>
			</div>
			<div class="role-list">
				<div 
					class="role-item" 
					v-for="role in availableRoles" 
					:key="role.value"
					:class="{active: role.value === currentUser.userRole}"
					@click="switchRole(role)"
				>
					<i :class="role.icon"></i>
					<span>{{ role.name }}</span>
					<i class="el-icon-check" v-if="role.value === currentUser.userRole"></i>
				</div>
			</div>
			<div class="dropdown-footer">
				<div class="logout-btn" @click="logout">
					<i class="el-icon-switch-button"></i>
					<span>退出登录</span>
				</div>
			</div>
		</div>
		
		<!-- 遮罩层 -->
		<div class="switcher-mask" v-show="showSwitcher" @click="showSwitcher = false"></div>
	</div>
</template>

<script>
module.exports = {
	name: 'RoleSwitcher',
	data() {
		return {
			showSwitcher: false,
			currentUser: {
				username: '',
				userRole: '',
				roleName: ''
			},
			availableRoles: [
				{
					value: 'consumer',
					name: '消费者',
					icon: 'el-icon-shopping-cart-2',
					url: 'index-consumer.html'
				},
				{
					value: 'supplier',
					name: '货主供应商',
					icon: 'el-icon-goods',
					url: 'index-supplier.html'
				},
				{
					value: 'logistics',
					name: '冷链企业',
					icon: 'el-icon-truck',
					url: 'index-logistics.html'
				}
			]
		}
	},
	mounted() {
		this.loadUserInfo();
		// 点击外部关闭下拉菜单
		document.addEventListener('click', this.handleClickOutside);
	},
	beforeDestroy() {
		document.removeEventListener('click', this.handleClickOutside);
	},
	methods: {
		// 加载用户信息
		loadUserInfo() {
			const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');
			if (userInfo.username) {
				this.currentUser = userInfo;
			} else {
				// 如果没有用户信息，跳转到登录页
				this.logout();
			}
		},
		
		// 切换角色
		switchRole(role) {
			if (role.value === this.currentUser.userRole) {
				this.showSwitcher = false;
				return;
			}
			
			// 更新用户角色信息
			const newUserInfo = {
				...this.currentUser,
				userRole: role.value,
				roleName: role.name
			};
			
			// 保存到localStorage
			localStorage.setItem('userInfo', JSON.stringify(newUserInfo));
			
			// 显示切换提示
			this.$message({
				message: `已切换到${role.name}角色`,
				type: 'success',
				duration: 1500
			});
			
			// 延迟跳转到对应页面
			setTimeout(() => {
				window.location.href = role.url;
			}, 1000);
		},
		
		// 退出登录
		logout() {
			this.$confirm('确定要退出登录吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				// 清除用户信息
				localStorage.removeItem('userInfo');
				// 跳转到登录页
				window.location.href = 'login.html';
			}).catch(() => {
				this.showSwitcher = false;
			});
		},
		
		// 处理点击外部关闭
		handleClickOutside(event) {
			if (!this.$el.contains(event.target)) {
				this.showSwitcher = false;
			}
		}
	}
}
</script>

<style scoped>
.role-switcher {
	position: relative;
	display: inline-block;
}

.current-user {
	display: flex;
	align-items: center;
	padding: 8px 12px;
	cursor: pointer;
	border-radius: 4px;
	transition: all 0.3s;
	color: #606266;
}

.current-user:hover {
	background-color: #f5f7fa;
	color: #409eff;
}

.current-user i.el-icon-user {
	margin-right: 8px;
	font-size: 16px;
}

.username {
	font-weight: 500;
	margin-right: 8px;
}

.role-name {
	font-size: 12px;
	color: #909399;
	margin-right: 8px;
}

.current-user i.el-icon-arrow-down {
	transition: transform 0.3s;
}

.current-user i.el-icon-arrow-down.rotate {
	transform: rotate(180deg);
}

.switcher-dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	width: 200px;
	background: white;
	border: 1px solid #e4e7ed;
	border-radius: 4px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	z-index: 2000;
	margin-top: 4px;
}

.dropdown-header {
	padding: 12px 16px;
	border-bottom: 1px solid #f0f0f0;
	font-weight: 500;
	color: #303133;
	font-size: 14px;
}

.role-list {
	padding: 8px 0;
}

.role-item {
	display: flex;
	align-items: center;
	padding: 10px 16px;
	cursor: pointer;
	transition: all 0.3s;
	color: #606266;
}

.role-item:hover {
	background-color: #f5f7fa;
	color: #409eff;
}

.role-item.active {
	background-color: #ecf5ff;
	color: #409eff;
}

.role-item i:first-child {
	margin-right: 10px;
	font-size: 16px;
}

.role-item span {
	flex: 1;
}

.role-item i.el-icon-check {
	color: #67c23a;
}

.dropdown-footer {
	border-top: 1px solid #f0f0f0;
	padding: 8px 0;
}

.logout-btn {
	display: flex;
	align-items: center;
	padding: 10px 16px;
	cursor: pointer;
	transition: all 0.3s;
	color: #f56c6c;
}

.logout-btn:hover {
	background-color: #fef0f0;
}

.logout-btn i {
	margin-right: 10px;
	font-size: 16px;
}

.switcher-mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1999;
	background: transparent;
}
</style>